<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>工作日计算器</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <div class="container theme-showcase" role="main">
        <h2>工作日计算器</h2>
        <form class="form">
            <div class="form-group">
                <table class="table">
                    <thead>
                        <tr>
                            <th>开始日期</th>
                            <th>结束日期</th>
                            <th>工作日天数</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><input type="date" class="form-control" id="startDate" placeholder="开始日期"></td>
                            <td><input type="date" class="form-control" id="endDate" placeholder="结束日期"></td>
                            <td><input type="number" min="1" class="form-control" id="workDays" placeholder="工作日天数"></td>
                            <td>
                                <div class="btn-group" role="group" aria-label="...">
                                    <button id="calcWorkDays" class="btn btn-success" type="button">计算工作日</button>
                                    <button id="calcEndDate" class="btn btn-primary" type="button">计算结束日期</button>
                                </div>
                            </td>
                        </tr>
                        <tr id="result">
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="form-group">
                <table class="table">
                    <thead>
                        <tr>
                            <th>节假日</th>
                            <th>补班日</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <select id="holiday" multiple size='25' class="form-control">
                                    <option>2021-04-03</option>
                                    <option>2021-04-04</option>
                                    <option>2021-04-05</option>
                                    <option>2021-05-01</option>
                                    <option>2021-05-02</option>
                                    <option>2021-05-03</option>
                                    <option>2021-05-04</option>
                                    <option>2021-05-05</option>
                                    <option>2021-06-12</option>
                                    <option>2021-06-13</option>
                                    <option>2021-06-14</option>
                                    <option>2021-09-19</option>
                                    <option>2021-09-20</option>
                                    <option>2021-09-21</option>
                                    <option>2021-10-01</option>
                                    <option>2021-10-02</option>
                                    <option>2021-10-03</option>
                                    <option>2021-10-04</option>
                                    <option>2021-10-05</option>
                                    <option>2021-10-06</option>
                                    <option>2021-10-07</option>
                                </select>
                            </td>
                            <td>
                                <select id="workday" multiple size='25' class="form-control">
                                    <option>2021-04-25</option>
                                    <option>2021-05-08</option>
                                    <option>2021-09-18</option>
                                    <option>2021-09-26</option>
                                    <option>2021-10-09</option>
                                </select>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </form>
    </div>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/moment.js/2.24.0/moment-with-locales.min.js"></script>
    <script>
        moment.locale("zh_CN");
        $(document).ready(function () {
            var holiday = [];
            $("#holiday option").each(function () {
                holiday.push($(this).text());
            });
            var workday = [];
            $("#workday option").each(function () {
                workday.push($(this).text());
            });

            $('#calcWorkDays').click(function () {
                var startDate = moment($('#startDate').val());
                var endDate = moment($('#endDate').val());
                var workDays = 0;
                while (!startDate.isAfter(endDate)) {
                    if (!isHoliday(startDate.format("YYYY-MM-DD"))) {
                        workDays++;
                    }
                    startDate = startDate.add(1, "d")
                }
                $('#workDays').val(workDays);
                formatResult()
            })
            $('#calcEndDate').click(function () {
                var startDate = moment($('#startDate').val());
                var endDate = startDate;
                var workDays = $('#workDays').val();
                if (workDays < 1) {
                    alert("工作日不能小于1")
                    return
                }
                do {
                    endDate = endDate.add(1, "d")
                    if (!isHoliday(endDate.format("YYYY-MM-DD"))) {
                        workDays--;
                    }
                } while (workDays > 0)
                $('#endDate').val(endDate.format("YYYY-MM-DD"));
                formatResult()
            })
            function formatResult() {
                var tds = $("#result td");
                var startDate = moment($('#startDate').val());
                $(tds[0]).text(startDate.format('dddd'))
                var endDate = moment($('#endDate').val());
                $(tds[1]).text(endDate.format('dddd'))
                var workDays = $('#workDays').val();
            }
            function isHoliday(date) {
                if (holiday.indexOf(date) >= 0) {
                    return true;
                }
                if (workday.indexOf(date) >= 0) {
                    return false;
                }
                date = moment(date)
                return date.isoWeekday() === 6 || date.isoWeekday() === 7
            }
        })
    </script>
</body>

</html>
